<!DOCTYPE html>
<html lang="en" class="no-js demo-7">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Morphing Buttons Concept | Demo 7</title>
		<meta name="description" content="Morphing Buttons Concept: Inspiration for revealing content by morphing the action element" />
		<meta name="keywords" content="expanding button, morph, modal, fullscreen, transition, ui" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<link rel="stylesheet" type="text/css" href="css/content.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div id="container" class="container">
			<!-- Top Navigation -->
			<div class="codrops-top clearfix">
				<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/PageLoadingEffects/"><span>Previous Demo</span></a>
				<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19004"><span>Back to the Codrops Article</span></a></span>
			</div>
			<header class="codrops-header">
				<h1>Morphing Buttons Concept</h1>
				<p>Inspiration for revealing content by morphing the action element. Examples:</p>
				<nav class="codrops-demos">
					<a href="index.html">Login/Signup</a>
					<a href="index2.html">Terms</a>
					<a href="index3.html">Info Overlay</a>
					<a href="index4.html">Subscribe</a>
					<a href="index5.html">Share</a>
					<a href="index6.html">Video Player</a>
					<a class="current-demo" href="index7.html">Sidebar Settings</a>
				</nav>
			</header>
			<section>
				<div class="mockup-content">
					<p>Click the button to see it expanding into a fullscreen overlay:</p>
					<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut juccama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach.</p>
				</div>
			</section>
			<section class="related">
				<p>If you enjoyed this demo you might also like:</p>
				<a href="http://tympanus.net/Development/ProgressButtonStyles/">
					<img src="http://tympanus.net/codrops/wp-content/uploads/2013/12/ProgressButtonStyles-300x162.png" />
					<h3>Progress Button Styles</h3>
				</a>
				<a href="http://tympanus.net/Development/SidebarTransitions/">
					<img src="http://tympanus.net/codrops/wp-content/uploads/2013/08/sidebartransitions-300x162.png" />
					<h3>Sidebar Transitions</h3>
				</a>
			</section>
		</div><!-- /container -->
		<div class="morph-button morph-button-sidebar morph-button-fixed">
			<button type="button"><span class="icon icon-cog">Settings Menu</span></button>
			<div class="morph-content">
				<div>
					<div class="content-style-sidebar">
						<span class="icon icon-close">Close the overlay</span>
						<h2>Settings</h2>
						<ul>
							<li><a class="icon icon-camera" href="#">Default filters</a></li>
							<li><a class="icon icon-server" href="#">Storage Use</a></li>
							<li><a class="icon icon-heart" href="#">Favorites</a></li>
							<li><a class="icon icon-zoom-in" href="#">Readability</a></li>
							<li><a class="icon icon-microphone" href="#">Speech</a></li>
							<li><a class="icon icon-cloud" href="#">Uploads</a></li>
							<li><a class="icon icon-user" href="#">Profile</a></li>
							<li><a class="icon icon-briefcase" href="#">Documents</a></li>
							<li><a class="icon icon-globe" href="#">Global Options</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div><!-- morph-button -->
		<script src="js/classie.js"></script>
		<script src="js/uiMorphingButton_fixed.js"></script>
		<script>
			(function() {
				var docElem = window.document.documentElement, didScroll, scrollPosition,
					container = document.getElementById( 'container' );

				// trick to prevent scrolling when opening/closing button
				function noScrollFn() {
					window.scrollTo( scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0 );
				}

				function noScroll() {
					window.removeEventListener( 'scroll', scrollHandler );
					window.addEventListener( 'scroll', noScrollFn );
				}

				function scrollFn() {
					window.addEventListener( 'scroll', scrollHandler );
				}

				function canScroll() {
					window.removeEventListener( 'scroll', noScrollFn );
					scrollFn();
				}

				function scrollHandler() {
					if( !didScroll ) {
						didScroll = true;
						setTimeout( function() { scrollPage(); }, 60 );
					}
				};

				function scrollPage() {
					scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
					didScroll = false;
				};

				scrollFn();
				
				var el = document.querySelector( '.morph-button' );
				
				new UIMorphingButton( el, {
					closeEl : '.icon-close',
					onBeforeOpen : function() {
						// don't allow to scroll
						noScroll();
						// push main container
						classie.addClass( container, 'pushed' );
					},
					onAfterOpen : function() {
						// can scroll again
						canScroll();
						// add scroll class to main el
						classie.addClass( el, 'scroll' );
					},
					onBeforeClose : function() {
						// remove scroll class from main el
						classie.removeClass( el, 'scroll' );
						// don't allow to scroll
						noScroll();
						// push back main container
						classie.removeClass( container, 'pushed' );
					},
					onAfterClose : function() {
						// can scroll again
						canScroll();
					}
				} );
			})();
		</script>
	</body>
</html>